<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Ionic Book Manager</title>
    <base href="./"/>
    <meta name="color-scheme" content="light dark"/>
    <meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <link rel="shortcut icon" type="image/png" href="./assets/icon/favicon.png"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-title" content="Ionic Book Manager"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    
    <!-- CSS Files -->
    <link href="./css/chunk-ionic.f5c8e0e3.css" rel="stylesheet">
    <link href="./css/app.7b141fc5.css" rel="stylesheet">
    
    <style>
        .debug-overlay {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 8px;
            border-radius: 4px;
            font-size: 11px;
            z-index: 10000;
            max-width: 250px;
        }
        .status-success { color: #4CAF50; }
        .status-error { color: #F44336; }
        .status-warning { color: #FF9800; }
    </style>
</head>
<body>
    <div id="app">
        <!-- Loading indicator -->
        <div style="display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column;">
            <div style="width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite;"></div>
            <p style="margin-top: 20px; color: #666;">Loading Original Ionic App...</p>
        </div>
    </div>
    
    <!-- Debug overlay -->
    <div class="debug-overlay">
        <div>🔧 Original App Debug</div>
        <div id="debug-status" class="status-success">✓ HTML Loaded</div>
    </div>

    <style>
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>

    <script>
        // Debug function
        function updateDebug(message, status = 'success') {
            const element = document.getElementById('debug-status');
            if (element) {
                element.className = `status-${status}`;
                element.innerHTML = status === 'success' ? `✓ ${message}` : 
                                  status === 'error' ? `✗ ${message}` : 
                                  `⏳ ${message}`;
            }
        }

        // Environment setup for HarmonyOS compatibility
        window.process = window.process || {};
        window.process.env = window.process.env || {};
        window.process.env.NODE_ENV = 'production';
        window.process.env.BASE_URL = './';
        window.process.env.VUE_APP_TITLE = 'Ionic Book Manager';
        
        // Mock problematic APIs for HarmonyOS compatibility
        
        // Mock @ionic/storage
        window.Storage = class MockStorage {
            constructor() {
                this.data = {};
            }
            async create() {
                updateDebug('Storage Created (Mock)');
                return this;
            }
            async get(key) {
                return this.data[key] || null;
            }
            async set(key, value) {
                this.data[key] = value;
            }
            async remove(key) {
                delete this.data[key];
            }
        };
        
        // Mock API calls
        window.mockApiResponse = {
            data: {
                message: '成功',
                user: {
                    id: 1,
                    username: 'testuser',
                    name: '测试用户'
                }
            }
        };
        
        // Mock postAction function
        window.postAction = function(url, data) {
            updateDebug(`API Call: ${url}`);
            return Promise.resolve(window.mockApiResponse);
        };
        
        // Global error handler
        window.addEventListener('error', function(e) {
            console.error('Global error:', e.error);
            updateDebug(`Error: ${e.message}`, 'error');
        });
        
        // Unhandled promise rejection handler
        window.addEventListener('unhandledrejection', function(e) {
            console.error('Unhandled promise rejection:', e.reason);
            updateDebug(`Promise Error: ${e.reason}`, 'error');
            e.preventDefault(); // Prevent the error from being logged to console
        });
        
        // Monitor app mounting
        let checkCount = 0;
        function checkAppMounted() {
            checkCount++;
            const appElement = document.getElementById('app');
            if (appElement && appElement.innerHTML.trim() !== '' && !appElement.innerHTML.includes('Loading Original')) {
                updateDebug('Vue App Mounted Successfully');
                
                // Hide debug overlay after successful mount
                setTimeout(() => {
                    const debugOverlay = document.querySelector('.debug-overlay');
                    if (debugOverlay) {
                        debugOverlay.style.display = 'none';
                    }
                }, 3000);
            } else if (checkCount < 40) { // Check for 20 seconds
                setTimeout(checkAppMounted, 500);
            } else {
                updateDebug('App Mount Timeout', 'error');
            }
        }
        
        // Start monitoring when DOM is ready
        document.addEventListener('DOMContentLoaded', function() {
            updateDebug('DOM Ready, Loading Scripts...');
            setTimeout(checkAppMounted, 1000);
        });
    </script>
    
    <!-- Legacy JavaScript Files for HarmonyOS compatibility -->
    <script defer src="./js/chunk-ionic-legacy.434e31d2.js" nomodule onload="updateDebug('Ionic Legacy Loaded')"></script>
    <script defer src="./js/chunk-vendors-legacy.cd066ad9.js" nomodule onload="updateDebug('Vendors Legacy Loaded')"></script>
    <script defer src="./js/app-legacy.5f6219e6.js" nomodule onload="updateDebug('App Legacy Loaded')"></script>
</body>
</html>